<!DOCTYPE html>
<html lang="zh-CN">


<head>

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="author" content="WSCXYLY" />
    <title>一个导航 - OneNav</title>
    <meta name="keywords" content="网址导航">
    <meta name="description" content="OneNav">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="stylesheet" href="https://s1.hdslb.com/bfs/static/jinkela/long/font/regular.css" />

    <link rel="stylesheet" href="/css/style.min.css">
    <link rel="stylesheet" href="/css/dark.min.css">
    <link rel="stylesheet" href="/css/animation.min.css">
    <link rel="stylesheet" href="/css/mobile.min.css">
    <link rel="stylesheet" href="/css/loading.min.css">
    <link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-y/font-awesome/6.0.0/css/all.min.css">
    <link rel="stylesheet" href="/css/bootstrap.min.css">


    <script src="https://cdn.staticfile.org/jquery/3.6.0/jquery.min.js"></script>

    <script>
      var userDefinedSearchData = {};
      var expandAll = false;
    </script>

    <script src="/js/header.min.js"></script>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
        
<script src="/js/html5shiv.min.js"></script>

        
<script src="/js/respond.min.js"></script>

    <![endif]-->
    <!-- / FB Open Graph -->
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://web.imsyy.top/index.html">
    <meta property="og:title" content="一个导航 - OneNav - OneNav">
    <meta property="og:description" content="OneNav">
    <meta property="og:site_name" content="一个导航 - OneNav - OneNav">

    <meta property="og:image" content="/images/webstack_banner_cn.png">

    <!-- / Twitter Cards -->
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="一个导航 - OneNav - OneNav">
    <meta name="twitter:description" content="OneNav">

    <meta name="twitter:image" content="/images/webstack_banner_cn.png">


    <!-- 直接添加html内容即可 -->
    <!-- 可设置多行 -->
    <!-- Izitoast -->
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/css/iziToast.min.css">
    <script type="text/javascript"
      src="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/izitoast/1.4.0/js/iziToast.min.js">
      </script>

    <meta name="generator" content="Hexo 5.4.2">
  </head>

</head>





<body class="page-body">
  <!--加载动画-->
  <div id="loading-box">
    <div class="spinner-box">
      <span class="loader"></span>
      <div class="loading-word">
        <p class="loading-title">OneNav</p>
      </div>
    </div>
  </div>
  <div class="page-container">
    <div class="sidebar-menu toggle-others fixed">
      <div class="sidebar-menu-inner">
        <header class="logo-env">
          <div class="logo">
            <a rel="go-top"><i class="fa-solid fa-compass"></i></a>
            <div class="logo-text">
              <a rel="go-top">OneNav</a>
            </div>
          </div>
          <div class="mobile-menu-toggle visible-xs">
            <a onclick="switchNightMode()">
              <i class="fa-solid fa-circle-half-stroke"></i>
            </a>
            <a href="" data-toggle="mobile-menu">
              <i class="fa-solid fa-bars"></i>
            </a>
          </div>
        </header>
        <ul id="main-menu" class="main-menu">

          <li class="">

            <a href="#常用网站" class="smooth">

              <i class="fa-solid fa-star"></i>
              <span class="title">常用网站</span>
            </a>
          </li>

          <li class="">

            <a href="#网页工具" class="smooth">

              <i class="fa-solid fa-screwdriver-wrench"></i>
              <span class="title">网页工具</span>
            </a>
          </li>

          <li class="">

            <a href="#素材资源" class="smooth">

              <i class="fa-solid fa-marker"></i>
              <span class="title">素材资源</span>
            </a>
          </li>

          <li class="">

            <a href="#知识教程" class="smooth">

              <i class="fa-solid fa-graduation-cap"></i>
              <span class="title">知识教程</span>
            </a>
          </li>

          <li class="">

            <a href="#前端框架" class="smooth">

              <i class="fa-solid fa-laptop"></i>
              <span class="title">前端框架</span>
            </a>
          </li>

          <hr style="margin-bottom: 32px; border-top: none;" />

          <li class="submit-tag">
            <a href="/submit/">
              <i class="fa-solid fa-award"></i>
              <span class="tooltip-blue">网址提交</span>
            </a>
          </li>
          <li class="submit-tag">
            <a href="/about/">
              <i class="fa-solid fa-circle-info"></i>
              <span class="tooltip-blue">关于本站</span>
            </a>
          </li>

        </ul>
      </div>
    </div>

    <div class="main-content">
      <nav class="navbar user-info-navbar" id="navbar" role="navigation">
        <ul class="user-info-menu left-links list-inline list-unstyled">
          <li class="menu-item">
            <a href="http://wscxyly.cn/" target="_black">
              <i class="fa-solid fa-house"></i>
              <span>主站</span>
            </a>
          </li>
          <li class="menu-item">
            <a href="http://blog.wscxyly.cn/" target="_black">
              <i class="fa-solid fa-blog"></i>
              <span>博客</span>
            </a>
          </li>
          <li class="menu-item" style="margin-left:auto;margin-right: 10px;">
            <i class="fa-solid fa-message" style="margin-right:6px"></i>
            <span id="jinrishici-sentence">正在加载今日诗词....</span>
            <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
          </li>
        </ul>
      </nav>

      <!-- 搜索 -->
      <div id="search" class="s-search">
        <div id="search-list" class="hide-type-list">
          <div class="s-type">
            <span></span>
            <div class="s-type-list animated fadeInUp">
              <label for="type-baidu">常用</label>
              <label for="type-search">搜索</label>
              <label for="type-br">工具</label>
              <label for="type-zhihu">社区</label>
              <label for="type-taobao1">生活</label>
              <label for="type-zhaopin">求职</label>
            </div>
          </div>
          <div class="search-group group-a">
            <span class="type-text">常用</span>
            <ul class="search-type">
              <li><input checked hidden type="radio" name="type" id="type-baidu" value="https://www.baidu.com/s?wd="
                  data-placeholder="百度一下，你就知道"><label for="type-baidu"><span style="color:#2100E0"
                    class="dark-text">百度</span></label>
              </li>
              <li><input hidden type="radio" name="type" id="type-bing1" value="https://cn.bing.com/search?q="
                  data-placeholder="微软 Bing 搜索"><label for="type-bing1"><span style="color:#007daa">Bing</span></label>
              </li>
              <li><input hidden type="radio" name="type" id="type-google" value="https://www.google.com/search?q="
                  data-placeholder="谷歌搜索"><label for="type-google"><span style="color:#3B83FA">G</span><span
                    style="color:#F3442C">o</span><span style="color:#FFC300">o</span><span
                    style="color:#4696F8">g</span><span style="color:#2CAB4E">l</span><span
                    style="color:#F54231">e</span></label></li>
              <li><input hidden type="radio" name="type" id="type-bili1"
                  value="https://search.bilibili.com/all?keyword=" data-placeholder="哔哩哔哩搜索"><label
                  for="type-bili1"><span style="color:#00a1d6">BiliBili</span></label></li>
              <li><input hidden type="radio" name="type" id="type-git1"
                  value="https://github.com/search?utf8=%E2%9C%93&q=" data-placeholder="搜索 Github 仓库"><label
                  for="type-git1"><span style="color:#000000" class="dark-text">Github</span></label></li>
            </ul>
          </div>
          <div class="search-group group-b">
            <span class="type-text">搜索</span>
            <ul class="search-type">
              <li><input hidden type="radio" name="type" id="type-search" value="https://www.baidu.com/s?wd="
                  data-placeholder="百度一下，你就知道"><label for="type-search"><span style="color:#2319dc"
                    class="dark-text">百度</span></label>
              </li>
              <li><input hidden type="radio" name="type" id="type-bing" value="https://cn.bing.com/search?q="
                  data-placeholder="微软 Bing 搜索"><label for="type-bing"><span style="color:#007daa">Bing</span></label>
              </li>
              <li><input hidden type="radio" name="type" id="type-google1" value="https://www.google.com/search?q="
                  data-placeholder="谷歌搜索"><label for="type-google1"><span style="color:#3B83FA">G</span><span
                    style="color:#F3442C">o</span><span style="color:#FFC300">o</span><span
                    style="color:#4696F8">g</span><span style="color:#2CAB4E">l</span><span
                    style="color:#F54231">e</span></label></li>
              <li><input hidden type="radio" name="type" id="type-360" value="https://www.so.com/s?q="
                  data-placeholder="360好搜"><label for="type-360"><span style="color:#19b955">360</span></label></li>
              <li><input hidden type="radio" name="type" id="type-sogo" value="https://www.sogou.com/web?query="
                  data-placeholder="搜狗搜索"><label for="type-sogo"><span style="color:#ff5943">搜狗</span></label></li>
              <li><input hidden type="radio" name="type" id="type-bili" value="https://search.bilibili.com/all?keyword="
                  data-placeholder="哔哩哔哩搜索"><label for="type-bili"><span style="color:#00a1d6">BiliBili</span></label>
              </li>
              <li><input hidden type="radio" name="type" id="type-git"
                  value="https://github.com/search?utf8=%E2%9C%93&q=" data-placeholder="搜索 Github 仓库"><label
                  for="type-git"><span style="color:#000000" class="dark-text">Github</span></label></li>
            </ul>
          </div>
          <div class="search-group group-c">
            <span class="type-text">工具</span>
            <ul class="search-type">
              <li><input hidden type="radio" name="type" id="type-ping" value="https://ping.chinaz.com/"
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-ping"><span
                    style="color:#00599e">PING检测</span></label></li>
              <li><input hidden type="radio" name="type" id="type-icp" value="https://icp.chinaz.com/"
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-icp"><span
                    style="color:#ffac00">备案查询</span></label></li>
              <li><input hidden type="radio" name="type" id="type-br" value="https://rank.chinaz.com/all/"
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-br"><span
                    style="color:#55a300">权重查询</span></label></li>
              <li><input hidden type="radio" name="type" id="type-links" value="https://link.chinaz.com/"
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-links"><span style="color:#313439"
                    class="dark-text">友链检测</span></label></li>
              <li><input hidden type="radio" name="type" id="type-404" value="https://stool.chinaz.com/https?url="
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-404"><span
                    style="color:#f00">HTTPS检测</span></label></li>
              <li><input hidden type="radio" name="type" id="type-ciku" value="https://seo.chinaz.com/"
                  data-placeholder="请输入网址 ( 不带http:// )"><label for="type-ciku"><span
                    style="color:#016DBD">SEO查询</span></label></li>
            </ul>
          </div>
          <div class="search-group group-d">
            <span class="type-text">社区</span>
            <ul class="search-type">
              <li><input hidden type="radio" name="type" id="type-zhihu"
                  value="https://www.zhihu.com/search?type=content&q=" data-placeholder="知乎，与你分享刚编的故事"><label
                  for="type-zhihu"><span style="color:#0084ff">知乎</span></label></li>
              <li><input hidden type="radio" name="type" id="type-wechat"
                  value="http://weixin.sogou.com/weixin?type=2&query=" data-placeholder="微信"><label
                  for="type-wechat"><span style="color:#00a06a">微信</span></label></li>
              <li><input hidden type="radio" name="type" id="type-weibo" value="http://s.weibo.com/weibo/"
                  data-placeholder="微博"><label for="type-weibo"><span style="color:#e6162d">微博</span></label></li>
              <li><input hidden type="radio" name="type" id="type-douban" value="https://www.douban.com/search?q="
                  data-placeholder="豆瓣"><label for="type-douban"><span style="color:#55a300">豆瓣</span></label></li>
              <li><input hidden type="radio" name="type" id="type-why" value="https://ask.seowhy.com/search/?q="
                  data-placeholder="SEO问答社区"><label for="type-why"><span style="color:#428bca">搜外问答</span></label></li>
            </ul>
          </div>
          <div class="search-group group-e">
            <span class="type-text">生活</span>
            <ul class="search-type">
              <li><input hidden type="radio" name="type" id="type-taobao1" value="https://s.taobao.com/search?q="
                  data-placeholder="淘宝"><label for="type-taobao1"><span style="color:#f40">淘宝</span></label></li>
              <li><input hidden type="radio" name="type" id="type-jd" value="https://search.jd.com/Search?keyword="
                  data-placeholder="京东"><label for="type-jd"><span style="color:#c91623">京东</span></label></li>
              <li><input hidden type="radio" name="type" id="type-xiachufang"
                  value="http://www.xiachufang.com/search/?keyword=" data-placeholder="下厨房"><label
                  for="type-xiachufang"><span style="color:#dd3915">下厨房</span></label></li>
              <li><input hidden type="radio" name="type" id="type-xiangha"
                  value="https://www.xiangha.com/so/?q=caipu&s=" data-placeholder="香哈菜谱"><label for="type-xiangha"><span
                    style="color:#930">香哈菜谱</span></label></li>
              <li><input hidden type="radio" name="type" id="type-12306" value="http://www.12306.cn/?"
                  data-placeholder="12306"><label for="type-12306"><span style="color:#07f">12306</span></label></li>
              <li><input hidden type="radio" name="type" id="type-qunar" value="https://www.qunar.com/?"
                  data-placeholder="去哪儿"><label for="type-qunar"><span style="color:#00afc7">去哪儿</span></label></li>
              <li><input hidden type="radio" name="type" id="type-快递100" value="http://www.kuaidi100.com/?"
                  data-placeholder="快递100"><label for="type-快递100"><span style="color:#3278e6">快递100</span></label></li>
            </ul>
          </div>
          <div class="search-group group-f">
            <span class="type-text">求职</span>
            <ul class="search-type">
              <li><input hidden type="radio" name="type" id="type-zhaopin"
                  value="https://sou.zhaopin.com/jobs/searchresult.ashx?kw=" data-placeholder="智联招聘"><label
                  for="type-zhaopin"><span style="color:#689fee">智联招聘</span></label></li>
              <li><input hidden type="radio" name="type" id="type-51job" value="https://search.51job.com/?"
                  data-placeholder="前程无忧"><label for="type-51job"><span style="color:#ff6000">前程无忧</span></label></li>
              <li><input hidden type="radio" name="type" id="type-lagou" value="https://www.lagou.com/jobs/list_"
                  data-placeholder="拉钩网"><label for="type-lagou"><span style="color:#00b38a">拉钩网</span></label></li>
              <li><input hidden type="radio" name="type" id="type-liepin" value="https://www.liepin.com/zhaopin/?key="
                  data-placeholder="猎聘网"><label for="type-liepin"><span style="color:#303a40"
                    class="dark-text">猎聘网</span></label></li>
            </ul>
          </div>
        </div>
        <form action="?s=" method="get" target="_blank" id="super-search-fm"><input type="text" id="search-text"
            placeholder="输入关键字搜索" style="outline:0" autocomplete="off"><button type="submit"><i
              class="fa fa-search "></i></button></form>
        <div class="set-check hidden-xs">
          <input type="checkbox" id="set-search-blank" class="bubble-3" autocomplete="off">
        </div>
      </div>
      <script type="text/javascript">
        eval(function (e, t, a, c, i, n) {
          if (i = function (e) {
            return (e < t ? "" : i(parseInt(e / t))) + (35 < (e %= t) ? String.fromCharCode(e + 29) : e.toString(
              36))
          }, !"".replace(/^/, String)) {
            for (; a--;) n[i(a)] = c[a] || i(a);
            c = [function (e) {
              return n[e]
            }], i = function () {
              return "\\w+"
            }, a = 1
          }
          for (; a--;) c[a] && (e = e.replace(new RegExp("\\b" + i(a) + "\\b", "g"), c[a]));
          return e
        }('!2(){2 g(){h(),i(),j(),k()}2 h(){d.9=s()}2 i(){z a=4.8(\'A[B="7"][5="\'+p()+\'"]\');a&&(a.9=!0,l(a))}2 j(){v(u())}2 k(){w(t())}2 l(a){P(z b=0;b<e.O;b++)e[b].I.1c("s-M");a.F.F.F.I.V("s-M")}2 m(a,b){E.H.S("L"+a,b)}2 n(a){6 E.H.Y("L"+a)}2 o(a){f=a.3,v(u()),w(a.3.5),m("7",a.3.5),c.K(),l(a.3)}2 p(){z b=n("7");6 b||a[0].5}2 q(a){m("J",a.3.9?1:-1),x(a.3.9)}2 r(a){6 a.11(),""==c.5?(c.K(),!1):(w(t()+c.5),x(s()),s()?E.U(b.G,+T X):13.Z=b.G,10 0)}2 s(){z a=n("J");6 a?1==a:!0}2 t(){6 4.8(\'A[B="7"]:9\').5}2 u(){6 4.8(\'A[B="7"]:9\').W("14-N")}2 v(a){c.1e("N",a)}2 w(a){b.G=a}2 x(a){a?b.3="1a":b.16("3")}z y,a=4.R(\'A[B="7"]\'),b=4.8("#18-C-19"),c=4.8("#C-12"),d=4.8("#17-C-15"),e=4.R(".C-1b"),f=a[0];P(g(),y=0;y<a.O;y++)a[y].D("Q",o);d.D("Q",q),b.D("1d",r)}();',
          62, 77,
          "||function|target|document|value|return|type|querySelector|checked||||||||||||||||||||||||||var|input|name|search|addEventListener|window|parentNode|action|localStorage|classList|newWindow|focus|superSearch|current|placeholder|length|for|change|querySelectorAll|setItem|new|open|add|getAttribute|Date|getItem|href|void|preventDefault|text|location|data|blank|removeAttribute|set|super|fm|_blank|group|remove|submit|setAttribute"
            .split("|"), 0, {}));
      </script>
      <!-- 搜索 end -->

      <!-- 公告栏 -->
      <div id="bulletin_box" class="alert alert-primary" role="alert">
        <div class="d-flex text-muted">
          <div><i class="fa-solid fa-bullhorn"></i></div>
          <div class="bulletin mx-1 mx-md-2">
            <ul class="bulletin-ul">
              <li class="scrolltext-title overflowClip_1"><a rel="bulletin">站点内容尚未完成</a> ( 05 / 02 )</li>
            </ul>
          </div>
          <a title="关闭公告" href="javascript:;" rel="external nofollow" onclick="$('#bulletin_box').slideUp('slow');"
            style="margin-left:auto"><i class="fa-solid fa-xmark"></i></a>
        </div>
      </div>
      <script>
        $(document).ready(function () {
          var ul = $(".bulletin-ul");
          var li = ul.children();
          if (li.length > 1) {
            var liHight = $(li[0]).height();
            setInterval('AutoScroll(".bulletin",' + liHight + ')', 1000);
          }
        });

        function AutoScroll(obj, hight) {
          $(obj).find("ul:first").animate({
            marginTop: "-" + hight + "px"
          }, 500, function () {
            $(this).css({
              marginTop: "0px"
            }).find("li:first").appendTo(this);
          });
        }
      </script>
      <!-- 公告栏 end -->








      <h4 class="text-gray">
        <i class="fa-solid fa-tags" style="margin-right: 7px;" id="常用网站"></i>常用网站
      </h4>
      <div class="row">

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://github.com/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://github.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/github.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>GitHub</strong>
                </a>
                <p class="overflowClip_2">全球最大的同性交友社区</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://vercel.com/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://vercel.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/vercel.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Vercel</strong>
                </a>
                <p class="overflowClip_2">目前最好用的网站托管服务</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://console.upyun.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://console.upyun.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/upyun.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>又拍云</strong>
                </a>
                <p class="overflowClip_2">静态文件存储与 CDN 加速</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://console.cloud.tencent.com/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://console.cloud.tencent.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/cloudtencent.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>腾讯云</strong>
                </a>
                <p class="overflowClip_2">国内几大云服务商其一，俗称凉心云</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.aliyun.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.aliyun.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/aliyun.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>阿里云</strong>
                </a>
                <p class="overflowClip_2">全球云计算服务及云解决方案提供商</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.bilibili.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.bilibili.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/bilibili.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>哔哩哔哩</strong>
                </a>
                <p class="overflowClip_2">叔叔我啊，最讨厌不能挣钱的东西了</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.aliyundrive.com/drive', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://www.aliyundrive.com/drive">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/aliyundrive.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>阿里云盘</strong>
                </a>
                <p class="overflowClip_2">目前正在用的网盘</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://replit.com/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://replit.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/Replit.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Replit</strong>
                </a>
                <p class="overflowClip_2">免费的协作式在线 IDE</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <br />








      <h4 class="text-gray">
        <i class="fa-solid fa-tags" style="margin-right: 7px;" id="网页工具"></i>网页工具
      </h4>
      <div class="row">

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://tool.lu/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://tool.lu/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/toollu.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>在线工具</strong>
                </a>
                <p class="overflowClip_2">在线工具 - 你的工具箱</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://notion-avatar.vercel.app/zh', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://notion-avatar.vercel.app/zh">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/notion-avatar.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Notion 风格头像制作</strong>
                </a>
                <p class="overflowClip_2">一个生成 Notion 风格头像的在线工具</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://freessl.cn/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://freessl.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/freessl.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>FreeSSL</strong>
                </a>
                <p class="overflowClip_2">一个提供免费HTTPS证书申请的网站</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://tinify.cn/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://tinify.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/tinify.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>TinyPNG</strong>
                </a>
                <p class="overflowClip_2">智能压缩您的WebP、JPEG和PNG图片</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://squoosh.app/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://squoosh.app/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/squoosh.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Squoosh</strong>
                </a>
                <p class="overflowClip_2">终极图像压缩，可压缩和比较图像</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://onlineconvertfree.com/zh/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://onlineconvertfree.com/zh/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/onlineconvertfree.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>OnlineConvertFree</strong>
                </a>
                <p class="overflowClip_2">在线转换各种文件、视频、音频和照片等</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.dute.org/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.dute.org/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/dute.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>独特工具箱</strong>
                </a>
                <p class="overflowClip_2">致力于打造体验良好的在线工具</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.niceso.fun/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.niceso.fun/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/niceso.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>奈斯搜索</strong>
                </a>
                <p class="overflowClip_2">坚持做最好用的阿里云盘资源搜索引擎</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://ps.gaoding.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://ps.gaoding.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/gaoding.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>在线 PS</strong>
                </a>
                <p class="overflowClip_2">一款专业精简的在线ps图片处理软件</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://xmsoushu.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://xmsoushu.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/xmsoushu.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>熊猫搜书</strong>
                </a>
                <p class="overflowClip_2">聚合搜索引擎，快速检索网络图书资源</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://caniuse.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://caniuse.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/CanIuse.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Can I use ...</strong>
                </a>
                <p class="overflowClip_2">最新的浏览器 Web 技术支持表</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <br />








      <h4 class="text-gray">
        <i class="fa-solid fa-tags" style="margin-right: 7px;" id="素材资源"></i>素材资源
      </h4>
      <div class="row">

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://fontawesome.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://fontawesome.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/fontawesome.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Font Awesome</strong>
                </a>
                <p class="overflowClip_2">世界上最受欢迎和最容易使用的图标集</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.iconfont.cn/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.iconfont.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/iconfont.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>iconfont</strong>
                </a>
                <p class="overflowClip_2">国内功能且图标内容很丰富的矢量图标库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://remixicon.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://remixicon.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/remixicon.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Remix Icon</strong>
                </a>
                <p class="overflowClip_2">为设计师和开发人员精心打造的图标库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://neumorphism.io/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://neumorphism.io/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/neumorphism.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Neumorphism</strong>
                </a>
                <p class="overflowClip_2">新拟态样式代码自动生成</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://lingdaima.com/shadow/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://lingdaima.com/shadow/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/smoothshadow.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Smooth Shadow</strong>
                </a>
                <p class="overflowClip_2">轻松完成好看的 CSS 阴影效果</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://lingdaima.com/jianbianse/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://lingdaima.com/jianbianse/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/cssgradient.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>CSS Gradient</strong>
                </a>
                <p class="overflowClip_2">在线生成 CSS 渐变色效果</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.tablesgenerator.com/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://www.tablesgenerator.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/tablesgenerator.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Tables Generator</strong>
                </a>
                <p class="overflowClip_2">在线生成器轻松创建复杂的表格</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://colorhunt.co/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://colorhunt.co/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/colorhunt.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Color Hunt</strong>
                </a>
                <p class="overflowClip_2">为设计和艺术项目获取色彩灵感</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://unsplash.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://unsplash.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/unsplash.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Unsplash</strong>
                </a>
                <p class="overflowClip_2">一个免版权的精美图片网站</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <br />








      <h4 class="text-gray">
        <i class="fa-solid fa-tags" style="margin-right: 7px;" id="知识教程"></i>知识教程
      </h4>
      <div class="row">

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.w3school.com.cn/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://www.w3school.com.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/w3school.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>W3School</strong>
                </a>
                <p class="overflowClip_2">全球最大的中文 Web 技术教程</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.runoob.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.runoob.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/runoob.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>菜鸟教程</strong>
                </a>
                <p class="overflowClip_2">学的不仅是技术，更是梦想！</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://developer.mozilla.org/zh-CN/docs/Web', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://developer.mozilla.org/zh-CN/docs/Web">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/MDN.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>MDN Web Docs</strong>
                </a>
                <p class="overflowClip_2">面向 Web 开发者的文档</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.csdn.net/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.csdn.net/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/csdn.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>CSDN</strong>
                </a>
                <p class="overflowClip_2">专业开发者社区</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.icourse163.org/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.icourse163.org/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/mooc.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>中国大学 MOOC</strong>
                </a>
                <p class="overflowClip_2">国家精品课程在线学习平台</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://study.163.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://study.163.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/study163.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>网易云课堂</strong>
                </a>
                <p class="overflowClip_2">一个专注于成人终身学习的在线教育平台</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.imooc.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.imooc.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/imooc.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>慕课网</strong>
                </a>
                <p class="overflowClip_2">IT技能学习平台</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <br />








      <h4 class="text-gray">
        <i class="fa-solid fa-tags" style="margin-right: 7px;" id="前端框架"></i>前端框架
      </h4>
      <div class="row">

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info" onclick="window.open('https://angular.cn/', '_blank')"
            data-toggle="tooltip" data-placement="bottom" title="" data-original-title="https://angular.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/angular.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Angular</strong>
                </a>
                <p class="overflowClip_2">现代 Web 开发平台</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://react.docschina.org/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://react.docschina.org/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/react.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>React</strong>
                </a>
                <p class="overflowClip_2">用于构建用户界面的 JavaScript 库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://staging-cn.vuejs.org/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://staging-cn.vuejs.org/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/vue.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Vue</strong>
                </a>
                <p class="overflowClip_2">渐进式 JavaScript 框架</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.naiveui.com/zh-CN/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://www.naiveui.com/zh-CN/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/NaiveUI.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Naive UI</strong>
                </a>
                <p class="overflowClip_2">一个 Vue 3 组件库，有点意思</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://layui.github.io/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://layui.github.io/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/layui.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Layui</strong>
                </a>
                <p class="overflowClip_2">开源模块化前端 UI 框架</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://element-plus.gitee.io/zh-CN/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://element-plus.gitee.io/zh-CN/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/element.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Element Plus</strong>
                </a>
                <p class="overflowClip_2">基于 Vue 3.0 的桌面端组件库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.mdui.org/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.mdui.org/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/mdui.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>MDUI</strong>
                </a>
                <p class="overflowClip_2">轻松地开发 Material Design 网页应用</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://getbootstrap.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://getbootstrap.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/bootstrap.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Bootstrap</strong>
                </a>
                <p class="overflowClip_2">开发响应式布局、移动设备优先的 WEB 项目</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://amazeui.shopxo.net/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://amazeui.shopxo.net/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/amaze.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Amaze</strong>
                </a>
                <p class="overflowClip_2">中国首个开源 HTML5 跨屏前端框架</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://youzan.github.io/vant/', '_blank')" data-toggle="tooltip"
            data-placement="bottom" title="" data-original-title="https://youzan.github.io/vant/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/vant.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Vant</strong>
                </a>
                <p class="overflowClip_2">轻量、可靠的移动端 Vue 组件库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.iviewui.com/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.iviewui.com/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/iviewui.png" class="lozad img-circle" width="40" src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>iViewUI</strong>
                </a>
                <p class="overflowClip_2">一套基于 Vue.js 的高质量 UI 组件库</p>
              </div>
            </div>
          </div>
        </div>

        <div class="col-sm-3">
          <div class="xe-widget xe-conversations box2 label-info"
            onclick="window.open('https://www.tailwindcss.cn/', '_blank')" data-toggle="tooltip" data-placement="bottom"
            title="" data-original-title="https://www.tailwindcss.cn/">
            <div class="xe-comment-entry">
              <a class="xe-user-img">
                <img data-src="/images/logos/tailwindcss.png" class="lozad img-circle" width="40"
                  src="/images/loading.svg">
              </a>
              <div class="xe-comment">
                <a href="#" class="xe-user-name overflowClip_1">
                  <strong>Tailwind CSS</strong>
                </a>
                <p class="overflowClip_2">无需离开您的HTML，即可快速建立现代网站</p>
              </div>
            </div>
          </div>
        </div>

      </div>
      <br />




      <!-- 悬浮窗 -->
      <div class="wapnone fk_service">
        <ul>
          <li class="fk_service_box fk_service_ax" onclick="switchNightMode()">
            <div class="fk_service_ax_cont" id="fk-span"> <span class="fk_service_triangle"
                id="fk-span-right"></span><span id="fk_service_text">切换夜间模式</span></div>
          </li>
          <li class="fk_service_box fk_service_jk">
            <a data-toggle="sidebar">
              <div class="fk_service_jk_cont" id="fk-span"> <span class="fk_service_triangle"
                  id="fk-span-right"></span>切换侧边栏</div>
            </a>
          </li>
          <li class="fk_service_box fk_service_dh" onclick="window.location=('/submit/')">
            <div class="fk_service_dh_cont" id="fk-span"> <span class="fk_service_triangle"
                id="fk-span-right"></span>提交网站收录</div>
          </li>
          <a rel="go-top">
            <li class="fk_service_box fk_service_upward" id="topup" style="display: none;">
              <div class="fk_service_upward_cont" id="fk-span"> <span class="fk_service_triangle"
                  id="fk-span-right"></span> <span>返回顶部</span>
              </div>
            </li>
          </a>
        </ul>
      </div>
      <!-- 悬浮窗 end -->

      <script src="/js/footer.min.js"></script>

      <footer class="main-footer sticky footer-type-1">
        <div class="footer-inner">
          <!-- Add your copyright text here -->
          <p>

            &copy; 2021 - 2023
            <a href="http://wscxyly.cn/" target="_blank"><strong>wscxyly</strong></a> | Design by <a
              href="http://viggoz.com" target="_blank"><strong>Viggo</strong></a> | Power by <a href="https://hexo.io/"
              target="_blank"><strong>Hexo</strong></a> & <a href="https://github.com/HCLonely/hexo-theme-webstack/"
              target="_blank"><strong>hexo-theme-webstack</strong></a>
          </p>
          <!-- <div class="go-up">
      <a href="#" rel="go-top">
        <i class="fas fa-angle-up"></i>
      </a>
    </div> -->
        </div>
      </footer>
    </div>
  </div>

  <script src="/js/bootstrap.min.js"></script>
  <script src="/js/TweenLite.min.js"></script>
  <script src="/js/resizeable.min.js"></script>
  <script src="/js/joinable.js"></script>
  <script src="/js/xenon-api.min.js"></script>
  <script src="/js/xenon-toggles.min.js"></script>
  <script src="/js/xenon-custom.min.js"></script>



  <script src="/js/lozad.min.js"></script>




  <!-- 直接添加html内容即可 -->
  <!-- 可设置多行 -->

</body>

</html>